import React from 'react'
import { connect } from 'react-redux'
import style from './index.module.scss'
import Change from './Change'


class Index extends React.Component {
    sum(list) {
        let money = 0
        for(let i = 0; i< list.length; i++) {
            if(list[i].num) {
                money += list[i].num * list[i].price
            }
        }
        return money
    }
    render() {
        return(
            <div>
                {
                    this.props.rList.filter(item => item.num).map((item ,key) => <div className={style.good} key={key}>
                    <div>{item.name}</div>
                    <div className={style.han}>
                        <div className={style.left}>{item.price}</div>
                        <div className={style.right}>
                            { item.num ? <button onClick={() => this.props.minus(item.name)}>-</button> : null}
                            { item.num ? <span>{item.num}</span> : null}
                            <button onClick={() => this.props.add(item.name)}>+</button>
                        </div>
                    </div>
                </div>)
                }
                <span>总价：{this.sum(this.props.rList)}</span>
                <Change title="猜你喜欢"></Change>
            </div>
        )
    }
}
const mapStateToProps = (store) => {
    return {
        rList: store.rList
    }
}
const mapDispatchToProps = (dispatch) => {
    return {
        add(name) {
            dispatch({
                type: 'ADD',
                name: name
            })
        },
        minus(name) {
            dispatch({
                type: 'MINUS',
                name: name
            })
        }
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Index)